<%@ page import="com.city.domain.house.townwithdata" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 方少
  Date: 2018/7/19
  Time: 18:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <script src="/static/webjars/layui/layui.js" charset="utf-8"></script>
    <script src="/static/js/jquery.min.js"></script>
    <title>出租房统计</title>
</head>
<body>
<div>
    <div id="rent" style="height: 500px" class="layui-col-lg9 layui-col-xs12 layui-col-sm9"></div>
    <div id="rentpie" style="height: 500px;" class="layui-col-lg3 layui-col-xs12 layui-col-sm3"></div>
</div>
<table class="layui-hide layui-col-lg12 layui-col-xs12 layui-col-sm12" id="demo" >

</table>

</body>
</html>
<script type="text/javascript">
    var cityid = <%= request.getParameter("cityid")%>
        <%String city = request.getParameter("cityName");
        if(city == null)
            city = "村庄";%>
    var xdate = new Array();
    var isrent = new Array();
    var norent = new Array();
    var countryid = new Array();
    var avg = new Array();
    var sumis = 0;
    var sumno = 0;
    $.get("/getRentHouse/townDetail",{TownCode:cityid},function(data){
            for(var i = 0;i < data.length;i++){
                countryid.push(data[i].townId);
                xdate.push(data[i].townName);
                isrent.push(data[i].isrent);
                norent.push(data[i].norent);
                avg.push(data[i].avg);
            }


        for(var i = 0;i < isrent.length;i++){
            sumis = sumis + isrent[i];
        }
        for(var i = 0;i < norent.length;i++){
            sumno = sumno + norent[i];
        }

        /////饼图部分
        var piecharts = echarts.init(document.getElementById("rentpie"));
        var option2 = {
            title:{
                text:"已租房与未出租占比",
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top:'20%',
                data: ['已出租','未出租']
            },
            series : [
                {
                    name: '出租情况',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:sumis, name:'已出租'},
                        {value:sumno, name:'未出租'}
                    ],
                    label:{
                        normal:{
                            formatter:'{b}:\n{c}\n {d}%'
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }

            charts.setOption(option);
            piecharts.setOption(option2);


            var dataItem = new Array();
            for(var i = 0;i < xdate.length;i++){
                var oneitem = {
                    "id":countryid[i],
                    "area":xdate[i],
                    "rent":isrent[i],
                    "norent":norent[i],
                    "count":isrent[i] + norent[i],
                    "avg":avg[i]
                }
                dataItem.push(oneitem);
            }


            layui.use('table', function() {
                var table = layui.table;
                //展示已知数据
                table.render({
                    elem: '#demo'
                    , cols: [[ //标题栏
                        {field: 'id', title: 'ID', width: 80, sort: true}
                        , {field: 'area', title: '地区',minWidth:80, align: 'center'}
                        , {field: 'rent', title: '出租数量', align: 'center'}
                        , {field: 'norent', title: '未出租数量', align: "center"}
                        , {field: 'count', title: '房屋总量', align: "center"}
                        , {field: 'avg', title: '均价', align: "center"}
                    ]]
                    ,
                    data:dataItem,
                    even: true
                    ,page: true //是否显示分页
                    ,limits: [5, 7, 10]
                    ,limit: 7//每页默认显示的数量
                    ,height:'full-300'
                });

            });

        });



    var charts = echarts.init(document.getElementById("rent"));
    ///////////数据模拟////////////////////
   /* var xdate =  ['钟二村','群英村','黄金山村','民主村','大石包','范家村','大礼村','大田湾村','凤凰村','龙盘窝村','双泉村'];
    var isrent = [50,         60,     55,        45,       40,     100,     50,        20     ,  50   , 11   ,     40];
    var norent = [100,         40,    100,       90,       40,     200,     70,        100     , 80   , 50   ,     60];
    var countryid = ['1001','1002','1003',      '1004',  '1005',  '1006',  '1007',  '1008',   '1009',  '1010',  '1011'];
    var avg = ['1000','2000','3000','3000','3000','3000','3000','2000','3000','3000','1000'];
    */


    option = {
        title:{text:'<%=city%>'+"租房统计"},
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['已出租','未出租']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis:  {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: xdate,
            axisLabel:{interval:0}
        },
        series: [
            {
                name: '已出租',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop'
                    }
                },
                data: isrent
            },
            {
                name: '未出租',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop'
                    }
                },
                data: norent
            }
        ]
    };

    //charts.setOption(option);

    // var sumis = 0;
    // var sumno = 0;
    // for(var i = 0;i < isrent.length;i++){
    //     sumis = sumis + isrent[i];
    // }
    // for(var i = 0;i < norent.length;i++){
    //     sumno = sumno + norent[i];
    // }

    //piecharts.setOption(option2);

    /////////////////////表格部分////////////////////

    // var dataItem = new Array();
    // for(var i = 0;i < xdate.length;i++){
    //     var oneitem = {
    //         "id":countryid[i],
    //         "area":xdate[i],
    //         "rent":isrent[i],
    //         "norent":norent[i],
    //         "count":isrent[i] + norent[i],
    //         "avg":avg[i]
    //     }
    //     dataItem.push(oneitem);
    // }
    //
    //
    // layui.use('table', function() {
    //     var table = layui.table;
    //     //展示已知数据
    //     table.render({
    //         elem: '#demo'
    //         , cols: [[ //标题栏
    //             {field: 'id', title: 'ID', width: 80, sort: true}
    //             , {field: 'area', title: '地区',minWidth:80, align: 'center'}
    //             , {field: 'rent', title: '出租数量', align: 'center'}
    //             , {field: 'norent', title: '未出租数量', align: "center"}
    //             , {field: 'count', title: '房屋总量', align: "center"}
    //             , {field: 'avg', title: '均价', align: "center"}
    //         ]]
    //         ,
    //         data:dataItem,
    //         even: true
    //         ,page: true //是否显示分页
    //         ,limits: [5, 7, 10]
    //         ,limit: 7//每页默认显示的数量
    //         ,height:'full-300'
    //     });
    //
    // });

</script>